<template>
    <div style="height:100%">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
        <ItemSyncDetail
            :show="detailShow"
            v-if="detailShow"
            :info="{
                ...info,
                ...currentData,
            }"
            :syncExtraParams="{
                barIndex: currentData.barIndex,
                syncStatus: [currentData.seriesIndex],
            }"
            :riskEntryTypeObj="riskEntryTypeObj"
            @item-sync-detail="itemSyncDetailHandle"
        ></ItemSyncDetail>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import ItemSyncDetail from './item-sync-detail.vue';

@Component({
    name: 'ItemBar',
    components: {
        ItemSyncDetail,
    },
})
export default class ItemBar extends Vue {
    @Prop() data: any;
    @Prop() info: any;
    @Prop() riskEntryTypeObj: any;
    chartInstance: any = null;

    detailShow: boolean = false;
    currentData: any = {};

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart();
            });
        }
    }

    handleClickBar(seriesName: string, data: string, percent: string, seriesIndex: number, xValue: number) {
        this.detailShow = true;
        this.currentData = {
            seriesName: seriesName == '同步成功' ? '成功' : '失败',
            percent: percent,
            data: data,
            seriesIndex: seriesIndex == 0 ? 1 : 0, // 注意:页面对应0是成功;但是实际1才是成功
            barIndex: xValue,
        };
    }

    // 同步明细回调
    itemSyncDetailHandle() {
        this.detailShow = false;
    }

    mounted() {
        window.handleClickBar = this.handleClickBar;
        this.initChart();
        this.updateChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        let initOption = {
            title: {
                show: true,
                text: `{a|}{b|条目同步参数}`,
                textStyle: {
                    color: 'black',
                    fontWeight: 'bold',
                    rich: {
                        a: {
                            width: 12,
                            height: 12,
                            borderRadius: 50,
                            borderWidth: 4,
                            borderColor: '#2288ff',
                            borderType: 'solid',
                            verticalAlign: 'top', // 对齐方式
                        },
                        b: {
                            fontWeight: 'bold',
                            fontSize: 15,
                            padding: [0, 0, 0, 5],
                        },
                    },
                },
            },
            toolbox: {
                show: true,
                itemSize: 17,
                showTitle: false,
                right: '1%',
                feature: {
                    myTool1: {
                        show: true,
                        title: '刷新',
                        icon:
                            'path://M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z',
                        //   设置颜色时放开
                        iconStyle: {
                            borderColor: '#7b7b7b',
                        },
                        emphasis: {
                            iconStyle: {
                                borderColor: '#91cc75',
                            },
                        },
                        onclick: () => {
                            this.refresh();
                        },
                    },
                },
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove',
                enterable: true,
                confine: true,
                showDelay: 200,
                hideDelay: 100,
                extraCssText: 'z-index: 99;', // 额外附加到浮层的 css 样式
                position: function(p) {
                    // 其中p为当前鼠标的位置
                    return [p[0] + 15, p[1] - 15];
                },
                // alwaysShowContent: true,
                formatter: param => {
                    const marker = param.marker;
                    const data = param.data;
                    const seriesName = param.seriesName;
                    const color = param.color;
                    const dataIndex = param.dataIndex;
                    const totalData = this.data['succeed'][dataIndex] + this.data['failed'][dataIndex];
                    const percent = totalData ? ((data / totalData) * 100).toFixed(2) + '%' : '0%';
                    const seriesIndex = param.seriesIndex;
                    return `${marker}${seriesName}:<span style="border-bottom:1px solid ${color};color:${color};margin:0 3px;font-size:8px;cursor:pointer;" onclick="handleClickBar('${seriesName}','${data}','${percent}','${seriesIndex}',${dataIndex})">${data}次</span>${percent}`;
                },
                backgroundColor: '#f5f5f5',
                borderColor: '#ffffff',
                textStyle: {
                    color: '#6f6d6d',
                    fontSize: 12,
                },
            },
            legend: {
                icon: 'rect',
                selectedMode: false,
                itemWidth: 16,
            },
            grid: {
                left: '2%',
                right: '1%',
                bottom: '3%',
                // height: '80%', // 高度
                containLabel: true,
            },

            xAxis: {
                type: 'category',
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'gray',
                        width: 1,
                    },
                },
                // boundaryGap: false,
                data: this.data['tags'],
            },
            yAxis: {
                type: 'value',
                // min: 0,
                // max: 'dataMax',
                // splitNumber: 4,
                // min: () => {
                //     // 获取y轴的刻度区间大小
                //     let interval = this.chartInstance.getModel().getComponent('yAxis').axis.scale._interval;
                //     return interval;
                // },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'gray',
                        width: 1,
                    },
                },
                axisLabel: {
                    showMinLabel: false, // 不显示最小刻度
                },
            },
            series: [
                {
                    name: '同步成功',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'top',
                        // position: ['40%', '90%'],
                        color: '#000',
                        // rotate: 90,
                    },
                    // barWidth: 20,
                    barMaxWidth: 50,
                    barMinHeight: 1,
                    data: this.data['succeed'],
                },
                {
                    name: '同步失败',
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'top',
                        // position: ['40%', '90%'],
                        color: 'black',
                        // rotate: 90,
                    },
                    // barWidth: 10,
                    barMaxWidth: 50,
                    barMinHeight: 1,
                    data: this.data['failed'],
                },
            ],
            color: ['#70b603', '#d9001b'],
        };

        this.chartInstance.setOption(initOption);
        // 点击事件
        this.chartInstance.on('click', param => {
            const data = param.data;
            const seriesName = param.seriesName;
            const dataIndex = param.dataIndex;
            const totalData = this.data['succeed'][dataIndex] + this.data['failed'][dataIndex];
            const percent = totalData ? ((data / totalData) * 100).toFixed(2) + '%' : '0%';
            const seriesIndex = param.seriesIndex;
            this.handleClickBar(seriesName, data, percent, seriesIndex, dataIndex);
        });
    }

    updateChart() {
        const dataOption = {
            xAxis: { data: this.data['tags'] },
            series: [{ data: this.data['succeed'] }, { data: this.data['failed'] }],
        };
        this.chartInstance.setOption(dataOption);
    }

    refresh() {
        this.$emit('refresh', '条目同步参数');
    }
}
</script>

<style scoped>
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
